<template>
    <uxt-modal
        :color="color"
        :bg-color="bgColor"
        :close="close"
        :max-height="maxHeight"
        :title="title"
        classes="radius-lt radius-rt"
        position="bottom"
        v-model="show"
        @open="sure = false"
        @close="!sure && $emit('cancel')"
    >
        <view
            :class="[{ disabled: action.disabled }]"
            :key="index"
            @click="handleItemClick(index)"
            class="padding text-lg text-center solid-bottom"
            v-for="(action, index) in actions"
        >
            {{ action.text }}
            <text class="margin-left-sm text-sm text-grey">{{ action.sub }}</text>
        </view>
        <view v-if="cancel" class="bg-gray" style="height: 10rpx;"></view>
        <view v-if="cancel" @click="handleCancel" class="padding text-lg text-center">
            {{ cancelText }}
        </view>
    </uxt-modal>
</template>

<script>
import baseMixin from '../mixins/base.js'
import uxtModal from './uxt-modal.vue'

export default {
    mixins: [baseMixin],
    components: {
        uxtModal
    },
    props: {
        // 显示
        value: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        // 选项 [{text, sub}, ...]
        actions: {
            type: Array,
            default() {
                return []
            }
        },
        // 取消按钮/文本
        cancel: {
            type: [Boolean, String],
            default: false
        },
        // 最大高度
        maxHeight: {
            type: [Number, String],
            default: '50%'
        },
        // 关闭按钮
        close: {
            type: Boolean,
            default: false
        },
        bgColor: {
            default: 'white'
        }
    },
    data() {
        return {
            show: this.value,
            sure: false
        }
    },
    computed: {
        cancelText() {
            return typeof this.cancel === 'string' ? this.cancel : '取消'
        }
    },
    watch: {
        value(newVal, oldVal) {
            this.show = newVal
        },
        show(newVal, oldVal) {
            !newVal && this.$emit('input', false)
        }
    },
    methods: {
        handleItemClick(index) {
            if (this.actions[index].disabled) {
                return
            }
            this.sure = true
            this.$emit('itemclick', { detail: { item: index } })
            this.show = false
        },
        handleCancel() {
            this.show = false
        }
    }
}
</script>

<style lang="scss" scoped></style>
